<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Inline Search &amp; Lookup - Options</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <script type="text/javascript" src="helper.js"></script>
    <script type="text/javascript">
      //<![CDATA[
      
      $ = function(x) { return document.getElementById(x) };
      
      // Set the active option in the <select> called select_name to choice.
      function setSelection(select_name, choice) {
        var select = $(select_name);
        var options = select.getElementsByTagName('option');
        for (var i in options) {
          var child = options[i];
          if (child.value == choice) {
            child.selected = 'selected';
            break;
          }
        }
      }
      
      var selects    = ['clickModifier', 'shortcutModifier', 'shortcutKey',
                        'selectedSource'];
      var checkboxes = ['shortcutEnable', 'shortcutSelection', 'hideWithEscape',
                        'saveFrameSize'];
      var numboxes   = ['frameWidth', 'frameHeight', 'queryFormWidth'];
      
      // Fills the engine/dictionary selection list.
      function fillSourcesList() {
        var list = $('selectedSource');
        var sources = localStorage.getObject('sources');
        
        list.innerHTML = '';
        for (var i in sources) {
          var opt_group = document.createElement('optgroup');
          opt_group.label = i;
          
          for (var j in sources[i]) {
            var opt = document.createElement('option');
            opt.innerText = j;
            opt.value = i + '::' + j;
            opt_group.appendChild(opt);
          }
          
          list.appendChild(opt_group);
        }
      }
      
      // Restores state from localStorage.
      function restoreOptions() {
        // Set defaults.
        setSelection('clickModifier', 'Alt');
        setSelection('shortcutModifier', 'Alt');
        setSelection('shortcutKey', 'W');
        setSelection('selectedSource', 'Simple Dictionaries::The Free Dictionary (Print)');
        $('shortcutEnable').checked = true;
        $('shortcutSelection').checked = false;
        $('frameWidth').value = 550;
        $('frameHeight').value = 250;
        $('queryFormWidth').value = 250;
        $('hideWithEscape').checked = true;
        $('saveFrameSize').checked = true;
      
        // Override defaults by saved settings.
        for (var i in selects) {
          var select = selects[i];
          var choice = localStorage.getObject(select);
          if (choice != null) setSelection(select, choice);
        }
      
        for (var i in checkboxes) {
          var checkbox = checkboxes[i];
          var checked = localStorage.getObject(checkbox);
          if (checked != null) $(checkbox).checked = checked;
        }
      
        for (var i in numboxes) {
          var textbox = numboxes[i];
          var val = localStorage.getObject(textbox);
          if (val != null) $(textbox).value = Math.round(val);
        }
        
        updateShortcutFields();
      }
      
      // Saves state to localStorage.
      function saveOptions() {
        for (var i in selects) {
          var select = selects[i];
          localStorage.setObject(select, $(select).value);
        }
      
        for (var i in checkboxes) {
          var checkbox = checkboxes[i];
          localStorage.setObject(checkbox, $(checkbox).checked);
        }
      
        for (var i in numboxes) {
          var textbox = numboxes[i];
          var value = parseInt($(textbox).value);
          if (!isNaN(value)) localStorage.setObject(textbox, value);
        }
        
        // Fade in status message.
        var status = $('saveStatusMessage');
        status.style.opacity = 1;
        setTimeout(function() {
          status.style.opacity = 0;
        }, 1500);
      }
      
      function updateShortcutFields() {
        checked = $('shortcutEnable').checked;
        $('shortcutModifier').disabled = !checked;
        $('shortcutKey').disabled = !checked;
        $('shortcutSelection').disabled = !checked;
      }
      
      function hideSourceForm() {
        var sourceEditor = $('sourceEditor');
        sourceEditor.style.opacity = '0';
        setTimeout(function() {
          if (sourceEditor.style.opacity == '0') {
            sourceEditor.style.visibility = 'hidden';
          }
        }, 1100);
        grayOut(false);
      }
      
      function showSourceForm() {
        $('sourceEditor').style.opacity = '1';
        $('sourceEditor').style.visibility = 'visible';
        grayOut(true);
        
        document.body.onkeydown = function(e) {
          if (e.which == 27) {  // Escape
            hideSourceForm();
          }
        };
        $('cancelForm').onclick = hideSourceForm;
        $('_shader').onclick = hideSourceForm;
      }
      
      function showAddForm() {
        $('engineName').value = '';
        setSelection('category', 'Search Engines');
        $('url').value = '';
        $('target').value = '';
        $('scrollX').value = 0;
        $('scrollY').value = 0;
        
        $('sourceEditorTitle').innerHTML = 'Create Source';
        var button = $('createSource');
        button.value = 'Create Source';
        button.disabled = 'disabled';
        button.onclick = function() {
          var category = $('category').value;
          var name = $('engineName').value;
          var sources = localStorage.getObject('sources');
          
          if (!sources[category]) {
            sources[category] = {};
          } else if (sources[category][name]) {
            alert('A source with the selected name and category already exists.');
            return;
          }
        
          var source = {
            url: $('url').value,
            target: $('target').value,
            scrollX: $('scrollX').value,
            scrollY: $('scrollY').value
          };
          
          sources[category][name] = source;
          localStorage.setObject('sources', sources);

          fillSourcesList();
          setSelection('selectedSource', category + '::' + name);
          hideSourceForm();
        };
        
        showSourceForm();
        validateForm();
      }
      
      function showEditForm() {
        var source = getSource($('selectedSource').value);
        
        $('engineName').value = source.name;
        setSelection('category', source.category);
        $('url').value = source.url;
        $('target').value = source.target;
        $('scrollX').value = source.scrollX;
        $('scrollY').value = source.scrollY;
        
        $('sourceEditorTitle').innerHTML = 'Edit Source';
        var button = $('createSource');
        button.value = 'Apply';
        button.disabled = '';
        button.attributes['data-oldName'] = source.name;
        button.attributes['data-oldCategory'] = source.category;
        button.onclick = function() {
          var sources = localStorage.getObject('sources');
          var old_name = button.attributes['data-oldName'];
          var old_category = button.attributes['data-oldCategory'];
          var name = $('engineName').value;
          var category = $('category').value;
          
          if (old_category != category || old_name != name) {
            delete sources[old_category][old_name];
            localStorage.setObject('selectedSource', category + '::' + name);
          }
        
          var source = {
            url: $('url').value,
            target: $('target').value,
            scrollX: $('scrollX').value,
            scrollY: $('scrollY').value
          };
          
          if (!sources[category]) sources[category] = {};
          sources[category][name] = source;
          localStorage.setObject('sources', sources);

          fillSourcesList();
          setSelection('selectedSource', category + '::' + name);
          hideSourceForm();
        };
        
        showSourceForm();
        validateForm();
      }
      
      function validateForm() {
        var url = $('url').value;
        var name_valid = $('engineName').value;
        var url_valid = (/^https?:\/\/[^\/]+\/.*$/.test(url) && /\$\$/.test(url));
        $('engineName').className = name_valid ? 'valid' : 'invalid';
        $('url').className = url_valid ? 'valid' : 'invalid';
        $('createSource').disabled = (name_valid && url_valid) ? '' : 'disabled';
      }
      
      function initNumberBoxes() {
        var restrictToNumbers = function(e) {
          var key = String.fromCharCode(e.which);
          var ENTER = 13;
          if (e.which != ENTER && !/\d/.test(key)) {
            e.preventDefault();
          }
        };
        var checkEmpty = function() {
          if (this.value == '') this.value = '0';
        };
        
        var number_boxes = ['scrollX', 'scrollY', 'frameWidth', 'frameHeight',
                            'queryFormWidth']
        for (var i in number_boxes) {
          $(number_boxes[i]).onkeypress = restrictToNumbers;
          $(number_boxes[i]).onkeyup = checkEmpty;
        }
      }
      //]]>
    </script>
    <style type="text/css">
      body {
        font-family: Arial, Tahoma, sans-serif;
        margin-top: 0px;
        padding-top: 0px;
      }
      
      label {
        float: left;
        width: 15em;
        padding-right: 20px;
        text-align: right;
      }
      
      h1 {
        margin-top: 0px;
        color: #F8F8FF;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#BBBBBB), to(gray));
        border-radius: 0px 0px 10px 10px;
        padding: 5px 10px;
        text-shadow: rgba(0, 0, 0, 0.3) 0px -1px 1px;
        font-size: 150%;
        text-align: center;
        -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 5px;
      }
      
      fieldset {
        background: #F8F8FF;
        border: 1px #CCC solid;
        border-radius: 0px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        margin-top: 20px;
        margin-bottom: 20px;
        -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 5px;
      }
      
      legend {
        background: #F8F8FF;
        border: 1px #CCC solid;
        padding: 5px 10px;
        text-shadow: rgba(0, 0, 0, 0.2) 0px -1px 1px;
        color: #777;
        font-size: 110%;
      }
      
      select {
        max-width: 200px;
        position: relative;
        top: -3px;
      }
      
      input, select {
        margin-left: 0px;
      }
      
      input[type=text] {
        width: 2.5em;
        position: relative;
        top: -4px;
      }
      
      button {
        float: right;
        position: relative;
        top: -4px;
      }
      
      .field {
        padding-top: 5px;
      }
      
      .invalid {
        background-color: #fcc;
      }
      
      .valid {
        background-color: #cfc;
      }
      
      .note {
        color: grey;
        margin-left: 21.7em;
        font-size: 75%;
      }
      
      #container {
        margin: auto;
        width: 600px;
        margin-top: 0px;
        padding-top: 0px;
      }
      
      #saveButton {
        margin: auto;
        margin-bottom: 10px;
        margin-top: -10px;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#BBBBBB), to(#808080));
        color: white;
        border: none;
        border-radius: 15px;
        text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 1px;
        font-weight: bold;
        padding: 2px 13px 3px 12px;
        display: block;
        cursor: pointer;
        font-size: 120%;
      }

      #saveButton:hover {
        background-image: -webkit-gradient(linear, left top, left bottom, from(#CCC), to(#909090));
      }
      
      #saveButton:active {
        background-image: -webkit-gradient(linear, left top, left bottom, from(gray), to(#BBBBBB));
        padding: 3px 12px 2px 13px;
      }
      
      #saveStatusMessage {
        display: block;
        position: fixed;
        top: 45%;
        left: 0px;
        text-align: center;
        color: white;
        font-weight: bold;
        text-shadow: rgba(0, 0, 0, 0.2) 0px -1px 1px;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#BBBBBB), to(gray));
        border-radius: 0px 15px 15px 0px;
        padding: 10px 20px;
        opacity: 0;
        -webkit-transition: opacity 1.5s ease;
      }
      
      #sourceEditor {
        width: 570px;
        position: fixed;
        top: 200px;
        z-index: 2;
        -webkit-box-shadow: inset rgba(0, 0, 0, 0.15) 0px 3px 5px;
        -webkit-transition: opacity 1.0s ease;
        opacity: 0;
        visibility: hidden;
      }
      
      #sourceEditor input[type=text] {
        border: 1px #bbb solid;
        -webkit-transition: background-color 0.2s linear;
      }
    </style>
  </head>
  <body onload="fillSourcesList(); restoreOptions(); initNumberBoxes();">
    <div id="container">
      <h1>Inline Search &amp; Lookup Options</h1>
      <fieldset>
        <legend>General</legend>
        <div class="field">
          <label for="selectedSource">Dictionary or Search Engine:</label>
          <select id="selectedSource"></select>
          <button onclick="showAddForm();" title="Create Custom Source">Add</button>
          <button onclick="showEditForm();" title="Edit Selected Source">Edit</button>
        </div>
        <div class="field">
          <label for="clickModifier">Mouse lookup modifier:</label>
          <select id="clickModifier">
            <option value="None">None</option>
            <option value="Ctrl">Ctrl</option>
            <option value="Alt">Alt</option>
            <option value="Meta">Command (Mac)</option>
            <option value="Ctrl+Alt">Ctrl+Alt</option>
          </select>
        </div>
        <div class="field">
          <label for="hideWithEscape">Hide popup with Esc:</label>
          <input type="checkbox" id="hideWithEscape" />
        </div>
      </fieldset>
      <fieldset>
        <legend>Keyboard Shortcut</legend>
        <div class="field">
          <label for="shortcutEnable">Enable shortcut:</label>
          <input type="checkbox" id="shortcutEnable" onclick="updateShortcutFields()" />
        </div>
        <div class="field">
          <label for="shortcutModifier">Shortcut modifier:</label>
          <select id="shortcutModifier">
            <option value="Ctrl">Ctrl</option>
            <option value="Alt">Alt</option>
            <option value="Meta">Command (Mac)</option>
            <option value="Ctrl+Alt">Ctrl+Alt</option>
            <option value="Ctrl+Shift">Ctrl+Shift</option>
            <option value="Alt+Shift">Alt+Shift</option>
          </select>
        </div>
        <div class="field">
          <label for="shortcutKey">Shortcut key:</label>
          <select id="shortcutKey">
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
            <option value="D">D</option>
            <option value="E">E</option>
            <option value="F">F</option>
            <option value="G">G</option>
            <option value="H">H</option>
            <option value="I">I</option>
            <option value="J">J</option>
            <option value="K">K</option>
            <option value="L">L</option>
            <option value="M">M</option>
            <option value="N">N</option>
            <option value="O">O</option>
            <option value="P">P</option>
            <option value="Q">Q</option>
            <option value="R">R</option>
            <option value="S">S</option>
            <option value="T">T</option>
            <option value="U">U</option>
            <option value="V">V</option>
            <option value="W">W</option>
            <option value="X">X</option>
            <option value="Y">Y</option>
            <option value="Z">Z</option>
            <option value="`">`</option>
          </select>
        </div>
        <div class="field">
          <label for="shortcutSelection">Shortcut looks up selection:</label>
          <input type="checkbox" id="shortcutSelection" />
        </div>
      </fieldset>
      <fieldset>
        <legend>Sizing</legend>
        <div class="field">
          <label for="frameWidth">Popup width:</label>
          <input type="text" id="frameWidth" />
        </div>
        <div class="field">
          <label for="frameHeight">Popup height:</label>
          <input type="text" id="frameHeight" />
        </div>
        <div class="field">
          <label for="queryFormWidth">Manual query form width:</label>
          <input type="text" id="queryFormWidth" />
        </div>
        <div class="field">
          <label for="saveFrameSize">Remember size:</label>
          <input type="checkbox" id="saveFrameSize" />
        </div>
      </fieldset>
      <input id="saveButton" type="button" onclick="saveOptions()" value="Save" />
      <div id="saveStatusMessage">Options saved.</div>
      
      <fieldset id="sourceEditor">
        <legend id="sourceEditorTitle"></legend>
        <div class="field">
          <label for="engineName">Name:</label>
          <input type="text" id="engineName" style="width: 17em" onkeyup="validateForm();" />
        </div>
        <div class="field">
          <label for="category">Category:</label>
          <select id="category">
            <option>Search Engines</option>
            <option>Simple Dictionaries</option>
            <option>Sophisticated Dictionaries</option>
            <option>Non-English Dictionaries</option>
            <option>Encyclopedias</option>
            <option>Other</option>
          </select>
        </div>
        <div class="field">
          <label for="url">URL:</label>
          <input type="text" id="url" style="width: 17em" onkeyup="validateForm();" />
          <div class="note">
            Note: Use $$ as the query placeholder.
          </div>
        </div>
        <div class="field">
          <label for="target">Scroll to Element ID/Class:</label>
          <input type="text" id="target" style="width: 10em" />
        </div>
        <div class="field">
          <label for="scrollX">Scroll Right By:</label>
          <input type="text" id="scrollX" />
        </div>
        <div class="field">
          <label for="scrollY">Scroll Down By:</label>
          <input type="text" id="scrollY" />
        </div>
        <div class="field">
          <label>&nbsp;</label>
          <input type="button" id="createSource" value="Ok" disabled="disabled" />
          <input type="button" id="cancelForm" value="Cancel" />
        </div>
      </fieldset>
    </div>
  </body>
</html>
